<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start" (click)="gotohome()">
      <ion-icon name="arrow-back"></ion-icon>
    </ion-buttons>
    <ion-title>progress</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
    <div class="title">
        ion-loading
    </div>
    <h3>属性</h3>
    <div>
       <p>animated:true (如果为true，则加载器将设置动画)</p>
       <ion-button expand="block" (click)="presentLoading()">Show Loading</ion-button>
    </div>
    <div>
       <p>backdropDismiss:true (如果为true，则单击背景时将关闭加载器)</p>
       <ion-button expand="block" (click)="presentLoadinga()">Show Loading</ion-button>
    </div>
    <div>
       <p>cssClass (设置加载器的class样式名)</p>
       <ion-button expand="block" (click)="presentLoadingb()">Show Loading</ion-button>
    </div>
    <div>
       <p>duration (设置加载器显示的时间)</p>
       <ion-button expand="block" (click)="presentLoadingc()">Show Loading</ion-button>
    </div>
    <div>
       <p>showBackdrop (是否显示背景)</p>
       <ion-button expand="block" (click)="presentLoadingd()">Show Loading</ion-button>
    </div>
    <div>
       <p>translucent (是否透明)</p>
       <ion-button expand="block" (click)="presentLoadinge()">Show Loading</ion-button>
    </div>
    <div class="title pt pb">
        ion-progress-bar
    </div>
    <!-- Default Progressbar -->
    <div class="pb"><ion-progress-bar></ion-progress-bar></div>

    <!-- Default Progressbar with 50 percent -->
    <div class="pb"><ion-progress-bar value="0.5"></ion-progress-bar></div>

    <!-- Colorize Progressbar -->
    <div class="pb"><ion-progress-bar color="primary" value="0.5"></ion-progress-bar></div>
    <div class="pb"><ion-progress-bar color="secondary" value="0.5"></ion-progress-bar></div>

    <!-- Other types -->
    <div class="pb"><ion-progress-bar value="0.25" buffer="0.5"></ion-progress-bar></div>
    <div class="pb"><ion-progress-bar type="indeterminate"></ion-progress-bar></div>
    <div class="pb"><ion-progress-bar type="indeterminate" reversed="true"></ion-progress-bar></div>

    <div class="title pt pb">
        ion-skeleton-text
    </div>
    <ion-list>
        <ion-list-header>
          <ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
        </ion-list-header>
        <ion-item>
          <ion-avatar slot="start">
            <ion-skeleton-text animated></ion-skeleton-text>
          </ion-avatar>
          <ion-label>
            <h3>
              <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
            </h3>
            <p>
              <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
            </p>
            <p>
              <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
            </p>
          </ion-label>
        </ion-item>
        <ion-item>
          <ion-thumbnail slot="start">
            <ion-skeleton-text animated></ion-skeleton-text>
          </ion-thumbnail>
          <ion-label>
            <h3>
              <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
            </h3>
            <p>
              <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
            </p>
            <p>
              <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
            </p>
          </ion-label>
        </ion-item>
        <ion-item>
          <ion-skeleton-text animated style="width: 27px; height: 27px" slot="start"></ion-skeleton-text>
          <ion-label>
            <h3>
              <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
            </h3>
            <p>
              <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
            </p>
            <p>
              <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
            </p>
          </ion-label>
        </ion-item>
      </ion-list>

      <div class="title pt pb">
          ion-spinner
      </div>
      <ion-list>
          <ion-item>
            <ion-label>Default</ion-label>
            <ion-spinner></ion-spinner>
          </ion-item>
          
          <ion-item>
            <ion-label>Lines</ion-label>
            <ion-spinner name="lines"></ion-spinner>
          </ion-item>
          
          <ion-item>
            <ion-label>Lines Small</ion-label>
            <ion-spinner name="lines-small"></ion-spinner>
          </ion-item>
          
          <ion-item>
            <ion-label>Dots</ion-label>
            <ion-spinner name="dots"></ion-spinner>
          </ion-item>
          
          <ion-item>
            <ion-label>Bubbles</ion-label>
            <ion-spinner name="bubbles"></ion-spinner>
          </ion-item>
          
          <ion-item>
            <ion-label>Circles</ion-label>
            <ion-spinner name="circles"></ion-spinner>
          </ion-item>
          
          <ion-item>
            <ion-label>Crescent</ion-label>
            <ion-spinner name="crescent"></ion-spinner>
          </ion-item>
          
          <ion-item>
            <ion-label>Paused</ion-label>
            <ion-spinner paused></ion-spinner>
          </ion-item>
          
          <ion-item>
            <ion-label>Primary</ion-label>
            <ion-spinner color="primary"></ion-spinner>
          </ion-item>
          
          <ion-item>
            <ion-label>Secondary</ion-label>
            <ion-spinner color="secondary"></ion-spinner>
          </ion-item>
          
          <ion-item>
            <ion-label>Tertiary</ion-label>
            <ion-spinner color="tertiary"></ion-spinner>
          </ion-item>
        </ion-list>
</ion-content>
